<template>
    <div style="padding:30px;">
        <div>
            <el-input style="width:30%" v-model="queryInfo.searchName" placeholder="请输入姓名" clearable />
            <el-button @click="getDataList">查询</el-button>
            <el-button type="primary" @click="dialogAddVisible = true">添加成员事件</el-button>
        </div>
        <el-table :data='dataList' stripe element-loading-background='rgba(255, 255, 255, .5)'
            element-loading-text='加载中，请稍后...' element-loading-spinner='el-icon-loading'>
            <el-table-column label='事件编号' prop='ID' fixed="left"></el-table-column>
            <el-table-column label='成员编号' prop='People'></el-table-column>
            <el-table-column label='姓名' prop='PName'></el-table-column>
            <el-table-column label='事件类型' prop='Title'></el-table-column>
            <el-table-column label='事件时间' prop='EventTime'></el-table-column>
            <el-table-column label='事件描述' prop='Content'></el-table-column>
            <el-table-column label='更新时间' prop='UpdateTime'></el-table-column>
            <el-table-column label='操作' fixed='right'>
                <template #default='scope'>
                    <!-- 修改 -->
                    <el-button type='primary' icon='el-icon-edit' size='mini' @click='dialogEditOpen(scope.row)'>
                    </el-button>
                    <!-- 删除 -->
                    <el-popconfirm title="确定删除吗？" @confirm='deleteData(scope.row.ID)'>
                        <el-button slot="reference" type='danger' icon='el-icon-delete' size='mini'>
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
            :current-page='queryInfo.page' :page-sizes='[1, 2, 10, 100]' :page-size='queryInfo.limit'
            layout='total, sizes, prev, pager, next, jumper' :total='total'></el-pagination>
        <el-dialog title='添加事件' :visible.sync="dialogAddVisible" width='50%'>
            <el-form :model='addForm' :rules='addFormRules' ref='addFormRef' label-width='100px'>
                <el-form-item label='People' prop='People'>
                    <el-input v-model='addForm.People' placeholder="请输入成员ID" :change='getNameById()'></el-input>
                </el-form-item>
                <el-form-item label='PName' prop='PName'>
                    <el-input v-model='addForm.PName' placeholder="成员ID对应的名字" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label='Title' prop='Title'>
                    <el-input v-model='addForm.Title' placeholder="请输入事件类型"></el-input>
                </el-form-item>
                <el-form-item label='Content' prop='Content'>
                    <el-input v-model='addForm.Content' placeholder="请输入事件描述"></el-input>
                </el-form-item>
                <el-form-item label='EventTime'>
                    <el-date-picker v-model="addForm.EventTime" type="datetime" placeholder="选择日期时间"
                        default-time="12:00:00">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-button type='primary' @click='addData()'>确 定</el-button>
            <el-button @click='dialogAddVisible = false'>取 消</el-button>
        </el-dialog>
        <el-dialog title='编辑事件' :visible.sync="dialogEditVisible" width='50%'>
            <el-form :model='editForm' :rules='editFormRules' ref='editFormRef' label-width='100px'>
                <el-form-item label='People' prop='People'>
                    <el-input v-model='editForm.People' placeholder="请输入成员ID" :change='getNameById()'></el-input>
                </el-form-item>
                <el-form-item label='PName' prop='PName'>
                    <el-input v-model='editForm.PName' placeholder="成员ID对应的名字" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label='Title' prop='Title'>
                    <el-input v-model='editForm.Title' placeholder="请输入事件类型"></el-input>
                </el-form-item>
                <el-form-item label='Content' prop='Content'>
                    <el-input v-model='editForm.Content' placeholder="请输入事件描述"></el-input>
                </el-form-item>
                <el-form-item label='EventTime'>
                    <el-date-picker v-model="editForm.EventTime" type="datetime" placeholder="选择日期时间"
                        default-time="12:00:00">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-button type='primary' @click='updateData'>确 定</el-button>
            <el-button @click='dialogEditVisible = false'>取 消</el-button>
        </el-dialog>
    </div>
</template>
    <script>
    export default {
        data() {
            return {
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                addOrUpdateVisible: false,
                isLoading: false,
                total: 0,
                dialogAddVisible: false,
                dialogEditVisible: false,
                queryInfo: {
                    searchName: '',
                    page: 1,
                    limit: 10
                },
                addForm: {
                    People: '',
                    PName: '',
                    Title: '',
                    Content: '',
                    EventTime: '',
                    UpdateTime: '',
                },
                editForm: {
                    People: '',
                    PName: '',
                    Title: '',
                    Content: '',
                    EventTime: '',
                    UpdateTime: '',
                },
                addFormRules: {
                    People: [
                        {
                            required: true,
                            message: '请输入成员ID',
                            trigger: 'blur'
                        }
                    ],
                    Title: [
                        {
                            required: true,
                            message: '请输入事件类型',
                            trigger: 'blur'
                        }
                    ],
                    Content: [
                        {
                            required: true,
                            message: '请输入事件内容',
                            trigger: 'blur'
                        }
                    ],
                    EventTime: [
                        {
                            required: true,
                            message: '请输入事件时间',
                            trigger: 'blur'
                        }
                    ]
                },
                editFormRules: {
                    People: [
                        {
                            required: true,
                            message: '请输入成员ID',
                            trigger: 'blur'
                        }
                    ],
                    Title: [
                        {
                            required: true,
                            message: '请输入事件类型',
                            trigger: 'blur'
                        }
                    ],
                    Content: [
                        {
                            required: true,
                            message: '请输入事件内容',
                            trigger: 'blur'
                        }
                    ],
                    EventTime: [
                        {
                            required: true,
                            message: '请输入事件时间',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        mounted() {
            this.getDataList()
        },
        methods: {
            test() {
                console.log(this.addForm.Id)
            },
            async getNameById() {
                console.log(this.addForm.People)
                if (this.addForm.People) {
                    const { data: res } = await this.$http.get('eventById' + this.addForm.People, {})
                    console.log(res.data)
                    if (res.data) {
                        if (res.data.value.name) {
                            this.addForm.PName = res.data.value.name
                        } else {
                            this.addForm.PName = '查无此人'
                        }
                    } else {
                        this.addForm.PName = '查无此人'
                    }
                }
            },
            async getDataList() {
                this.isLoading = true
                // 调用post请求
                console.log(this.dataList)
                const { data: res } = await this.$http.get('events', {
                    // params: this.queryInfo
                })
                if (res.code !== 20000) {
                    this.$message.error('加载事件列表失败')
                    this.isLoading = false
                } else {
                    let length = res.data.value.length;
                    for (let i = 0; i < length; i++) {
                        let id = res.data.value[i].People;
                        const { data: result } = await this.$http.get('eventById' + id, {});
                        res.data.value[i].PName = result.data.value.name;
                        res.data.value[i].People = res.data.value[i].People;
                        console.log(res.data.value[i]);
                    }
                    this.dataList = res.data.value // 将返回数据赋值
                    this.total = res.data.total // 总个数
                    this.isLoading = false
                }
            },
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            deleteData(id) {
                this.deleteDataFunc(id);
            },
            async deleteDataFunc(id) {
                const { data: res } = await this.$http.delete('events', {
                    params: {
                        "c_id": id
                    }
                })
                if (res.code === 20000) {
                    this.$message.success('删除成功！')
                    this.getDataList()
    
                } else {
                    this.$message.error('删除失败！')
                    this.getDataList()
                }
            },
            async addData() {
                var date = new Date();
                var datas = JSON.stringify({
                    "People": Number(this.addForm.People),
                    "Title": this.addForm.Title,
                    "Content": this.addForm.Content,
                    "EventTime": this.addForm.EventTime,
                    "UpdateTime": date.toLocaleString()
                });
                if (this.addForm.PName !== "查无此人") {
                    const { data: res } = await this.$http.post('events', datas)
                    if (res.code === 20000) {
                        this.$message.success('添加成功！')
                        this.addForm = {}
                        this.getDataList();
                    } else {
                        this.$message.error('添加失败！')
                        this.addForm = {}
                        this.getDataList()
                    }
                }else{
                        this.$message.error('请检查成员编号！')
                        return;
                }
                this.dialogAddVisible = false;
                console.log(res)
            },
            async updateData(id) {

                var date = new Date();
                var datas = JSON.stringify({
                    "People": Number(this.addForm.People),
                    "Title": this.addForm.Title,
                    "Content": this.addForm.Content,
                    "EventTime": this.addForm.EventTime,
                    "UpdateTime": date.toLocaleString()
                });
                if (this.editForm.PName !== "查无此人") {
                    const { data: res } = await this.$http.post('events', datas)
                    if (res.code === 20000) {
                        this.$message.success('添加成功！')
                        this.addForm = {}
                        this.getDataList();
                    } else {
                        this.$message.error('添加失败！')
                        this.addForm = {}
                        this.getDataList()
                    }
                }else{
                        this.$message.error('请检查成员编号！')
                        return;
                }
                this.dialogAddVisible = false;
                console.log(res)
            },
            dialogEditOpen(row) {
                this.editForm = row;
                this.dialogEditVisible = true;
            },
            // 监听pageSize改变的事件
            handleSizeChange(newLimit) {
                this.queryInfo.limit = newLimit
                this.getDataList() // 数据发生改变重新申请数据
            },
            // 监听pageNum改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.page = newPage
                this.getDataList() // 数据发生改变重新申请数据
            },
    
        }
    }
    
    </script>
